<template>
  <div class="info-card">
      <q-item clickable v-ripple @click="handleActive">
        <q-item-section avatar>
          <q-avatar>
            <img :src="avatar" />
          </q-avatar>
        </q-item-section>

        <q-item-section>
          <q-item-label>{{ remark }}</q-item-label>
          <q-item-label caption lines="1">{{ email }}</q-item-label>
        </q-item-section>
      </q-item>
  </div>
</template>

<script>
export default {
  name: 'InfoCard',
  props: {
    id: {
      type: String,
      default: ''
    },
    avatar: {
      type: String,
      default: ''
    },
    remark: {
      type: String,
      default: ''
    },
    email: {
      type: String,
      default: ''
    }
  },
  data() {
    return {};
  },

  methods: {
    // 点击事件
    handleActive() {
      this.$emit('active', this.id)
    }
  },
};
</script>

<style lang="scss" scoped>
@import '@/styles/quasar.variables.scss';

.info-card {
  .q-item__label {
    color: $sub_title_color;
    font-size: 14px;
  }
  .q-item {
    padding: 4px 16px !important;
  }
  .active-item {
    background: $active_bg;
  }
}
</style>
